<template>
	<div
		class="relative h-screen bg-white xl:bg-zinc-200 xl:dark:bg-zinc-800 text-center"
	>
		<div
			class="w-[100%] absolute xl:left-1/2 xl:translate-x-[-50%] xl:py-4 px-3 mt-4 dark:bg-zinc-800 xl:bg-white xl:w-[388px] xl:dark:bg-zinc-900 xl:mt-8 xl:rounded-sm xl:shadow-lg"
		>
			<h3
				class="hidden mb-2 font-semibold text-base text-main dark:text-zinc-300"
			>
				账号注册
			</h3>

			<vee-form @submit="onRegHandler">
				<vee-field
					type="text"
					name="username"
					placeholder="用户名"
					autocomplete="on"
					class="dark:bg-zinc-800 dark:text-zinc-400 border-b-zinc-400 border-b w-full outline-none outline-0 pb-1 px-1 text-base focus:border-b-main dark:focus:border-b-zinc-200 xl:default:bg-zinc-900"
					:rules="validateUsername"
					v-model="regForm.username"
				/>
				<div class="relative">
					<vee-error-message
						class="block text-sm text-red-600 mt-0.5 text-left"
						name="username"
					/>
				</div>
				<vee-field
					type="password"
					name="password"
					placeholder="密码"
					autocomplete="on"
					class="dark:bg-zinc-800 dark:text-zinc-400 border-b-zinc-400 border-b w-full outline-none outline-0 pb-1 px-1 text-base focus:border-b-main dark:focus:border-b-zinc-200 xl:default:bg-zinc-900"
					:rules="validatePassword"
					v-model="regForm.password"
				/>
				<div class="relative">
					<vee-error-message
						class="block text-sm text-red-600 mt-0.5 text-left"
						name="password"
					/>
				</div>
				<vee-field
					type="password"
					name="confirmPassword"
					placeholder="确认密码"
					autocomplete="on"
					class="dark:bg-zinc-800 dark:text-zinc-400 border-b-zinc-400 border-b w-full outline-none outline-0 pb-1 px-1 text-base focus:border-b-main dark:focus:border-b-zinc-200 xl:default:bg-zinc-900"
					rules="validateConfirmPassword:@password"
					v-model="regForm.confirmPassword"
				/>
				<div class="relative">
					<vee-error-message
						class="block text-sm text-red-600 mt-0.5 text-left"
						name="confirmPassword"
					/>
				</div>
				<div class="pt-1 pb-3 leading-[0px] text-right">
					<a
						@click="onToLogin"
						class="inline-block p-1 text-zinc-400 text-right dark:text-zinc-600 hover:text-zinc-600 dark:hover:text-zinc-400 text-sm duration-300 cursor-pointer"
						>去登录</a
					>
				</div>

				<m-button
					:isActiveAnim="false"
					class="w-full dark:bg-zinc-900 xl:dark:bg-zinc-800"
					:loading="loading"
					>注册</m-button
				>
			</vee-form>
		</div>
	</div>
</template>

<script setup>
import { ref } from 'vue'
import {
	Form as VeeForm,
	Field as VeeField,
	ErrorMessage as VeeErrorMessage,
	defineRule,
} from 'vee-validate'

import {
	validateUsername,
	validatePassword,
	validateConfirmPassword,
} from '../validate'

import { useStore } from 'vuex'
import { useRoute, useRouter } from 'vue-router'

import { LOGIN_TYPE_USERNAME } from '@/constants/index'

defineRule('validateConfirmPassword', validateConfirmPassword)

const regForm = ref({
	username: '',
	password: '',
	confirmPassword: '',
})

const loading = ref(false)

const store = useStore()
const router = useRouter()
const route = useRoute()
const onToLogin = () => {
	store.commit('app/changeRouteType', 'push')
	router.push('/login')
}

const onRegHandler = async () => {
	loading.value = true
	try {
		await store.dispatch('user/register', {
			username: regForm.value.username,
			password: regForm.value.password,
			...route.query,
		})

		// 注册完成，直接触发登录
		await store.dispatch('user/login', {
			username: regForm.value.username,
			password: regForm.value.password,
			loginType: LOGIN_TYPE_USERNAME,
		})
	} finally {
		loading.value = false
	}
	router.push('/')
}
</script>

<style scoped lang="scss"></style>
